<!--
 * @Author: zhangyongbing
 * @Date: 2022-04-20 09:38:41
 * @LastEditors: zhangyongbing
 * @LastEditTime: 2022-04-21 13:37:11
 * @Description: /筛选组件
 * @FilePath: /psys-ppm-web/src/components/headerSelect/index.vue
-->
<template>
	<div class="headerSelect" :style="{ width: width + 'px' }">
		<!-- 船代 -->
		<el-select
			v-if="dataType == 0"
			v-loadmore="shipAgentLoadMore"
			v-model="shipAgentId"
			filterable
			size="mini"
			:clearable="true"
			remote
			class="others"
			@change="shipAgentChange"
			reserve-keyword
			placeholder="船代"
			:remote-method="remoteMethodShipAgent"
			:loading="loading"
		>
			<el-option v-for="(item, index) in shipAgentList" :key="index" :label="item.fullName" :value="item.id"></el-option>
		</el-select>
		<!-- 船名 -->
		<el-select
			ref="select"
			popper-class="selectClass"
			v-if="dataType == 1"
			v-model="shipNameId"
			filterable
			size="mini"
			:clearable="true"
			@clear="clearShip"
			remote
			class="others"
			@change="shipNameChange"
			reserve-keyword
			placeholder="船名"
			:remote-method="remoteMethodShipName"
			v-selectLoadMore="shipLoadMore"
			:loading="loading"
		>
			<el-option v-for="(item, index) in shipNameList" :key="index" :label="item.shipNameVoyage" :value="item.id"></el-option>
		</el-select>
		<!-- 货代 -->
		<el-select
			v-if="dataType == 2"
			v-model="cargoAgentId"
			v-loadmore="cargoAgentLoadMore"
			filterable
			size="mini"
			:clearable="true"
			remote
			class="others"
			@change="cargoAgentChange"
			reserve-keyword
			placeholder="货代"
			:remote-method="remoteMethodCargoAgent"
			:loading="loading"
		>
			<el-option v-for="(item, index) in cargoAgentList" :key="index" :label="item.fullName" :value="item.id"></el-option>
		</el-select>
		<!-- 货主 -->
		<el-select
			v-if="dataType == 3"
			v-model="cargoOwnerId"
			v-loadmore="cargoOwnerLoadMore"
			filterable
			size="mini"
			:clearable="true"
			remote
			class="others"
			@change="cargoOwnerChange"
			reserve-keyword
			placeholder="货主"
			:remote-method="remoteMethodCargoOwner"
			:loading="loading"
		>
			<el-option v-for="(item, index) in cargoOwnerList" :key="index" :label="item.fullName" :value="item.id"></el-option>
		</el-select>
		<!-- 货名 -->
		<el-select
			v-if="dataType == 4"
			v-model="cargoNameId"
			v-loadmore="cargoNameLoadMore"
			filterable
			size="mini"
			:clearable="true"
			remote
			class="others"
			@change="cargoNameChange"
			reserve-keyword
			placeholder="货名"
			:remote-method="remoteMethodCargoName"
			:loading="loading"
		>
			<el-option
				v-for="(item, index) in cargoNameList"
				:key="index"
				:label="item.cargoInfoName"
				:value="item.cargoInfoCode"
			></el-option>
		</el-select>
		<!-- 驳船 -->
		<el-select
			v-if="dataType == 5"
			v-model="bargeNameId"
			filterable
			size="mini"
			:clearable="true"
			remote
			class="others"
			@change="bargeNameChange"
			reserve-keyword
			placeholder="驳船"
			:remote-method="remoteMethodBargeName"
			:loading="loading"
		>
			<el-option v-for="(item, index) in bargeNameList" :key="index" :label="item.nameCn" :value="item.id"></el-option>
		</el-select>
		<!-- 船名航次 -->
		<el-select
			v-if="dataType == 6"
			v-model="shipVoyageId"
			filterable
			size="mini"
			:clearable="true"
			remote
			class="others"
			@change="shipVoyageOnChange"
			reserve-keyword
			placeholder="船名航次"
			:remote-method="remoteMethodShipVoyage"
			:loading="loading"
		>
			<el-option v-for="(item, index) in shipVoyageList" :key="index" :label="item.shipNameVoyage" :value="item.id"></el-option>
		</el-select>
		<!-- 货名 -->
		<el-select
			v-if="dataType == 7"
			v-loadmore="cargoNameLoadMore"
			v-model="cargoNameMainId"
			filterable
			size="mini"
			:clearable="true"
			remote
			class="others"
			@change="cargoNameMainChange"
			reserve-keyword
			placeholder="货名"
			:remote-method="remoteMethodMainCargoName"
			:loading="loading"
		>
			<el-option
				v-for="(item, index) in cargoNameList"
				:key="index"
				:label="item.cargoInfoName"
				:value="item.cargoInfoCode"
			></el-option>
		</el-select>
	</div>
</template>

<script>
export default {
	name: "headerSelect",
	props: {
		// 船代
		shipAgentId: {
			type: String,
		},
		// 船名
		shipNameId: {
			type: String,
		},
		// 货代
		cargoAgentId: {
			type: String,
		},
		// 货主
		cargoOwnerId: {
			type: String,
		},
		// 驳船
		bargeNameId: {
			type: String,
		},
		// 货名
		cargoNameId: {
			type: String,
		},
		// 货名
		cargoNameMainId: {
			type: String,
		},
		// 船名航次
		shipVoyageId: {
			type: String,
		},
		// 数据类型
		dataType: {
			type: Number,
		},
		// 修改船代
		shipAgentOnChange: {
			type: Function,
		},
		// 修改船名
		shipNameOnChange: {
			type: Function,
		},
		// 修改货代
		cargoAgentOnChange: {
			type: Function,
		},
		// 修改货主
		cargoOwnerOnChange: {
			type: Function,
		},
		// 修改驳船
		bargeNameOnChange: {
			type: Function,
		},
		// 修改货名
		cargoNameOnChange: {
			type: Function,
		},
		// 修改船名航次
		shipVoyageOnChange: {
			type: Function,
		},
		cargoNameMainOnChange: {
			type: Function,
		},
		// 宽度
		width: {
			type: Number | String,
			default: 153,
		},
	},
	components: {},
	data() {
		return {
			shipAgentList: [], //船代
			shipNameList: [], //船名
			cargoAgentList: [], //货代
			cargoOwnerList: [], //货主
			bargeNameList: [], //驳船
			cargoNameList: [], // 货名
			shipVoyageList: [], //船名航次
			loading: false, //数据加载
			queryAll: {
				startpage: 1,
				pagesize: 20,
				totalPageNum: 0,
			},
			shipKeyWord: "",
			shipAgentPageNum: 1,
			shipAgentTotalPageNum: "",
			shipAgentQuery: "",
			cargoAgentPageNum: 1,
			cargoAgentTotalPageNum: "",
			cargoAgentQuery: "",
			cargoOwnersPageNum: 1,
			cargoOwnersTotalPageNum: "",
			cargoOwnersQuery: "",
			cargoNamePageNum: 1,
			cargoNameQuery: "",
			cargoNameTotalPageNum: "",
		}
	},
	created() {},
	watch: {
		dataType: {
			handler(value) {
				value == 0
					? this.getShipAgent("")
					: value == 1
					? this.getShipName("")
					: value == 2
					? this.getCargoAgent("")
					: value == 3
					? this.getCargoOwner("")
					: value == 4
					? this.getCargoName("")
					: value == 5
					? this.getBargeName("")
					: value == 6
					? this.getShipVoyage("")
					: value == 7
					? this.getCargoName("")
					: ""
			},
			immediate: true,
		},
	},
	mounted() {},
	methods: {
		/**
		 * @Author: gonghairun
		 * @description: 船代-下拉加载
		 * @param {*}
		 * @return {*}
		 */
		shipAgentLoadMore() {
			this.shipAgentPageNum++
			if (this.shipAgentTotalPageNum < this.shipAgentPageNum) {
				return
			}
			this.getShipAgent(this.shipAgentQuery)
		},
		/**
		 * @Author: gonghairun
		 * @description: 货代-下拉加载
		 * @param {*}
		 * @return {*}
		 */
		cargoAgentLoadMore() {
			this.cargoAgentPageNum++
			if (this.cargoAgentTotalPageNum < this.cargoAgentPageNum) {
				return
			}
			this.getCargoAgent(this.cargoAgentQuery)
		},
		/**
		 * @Author: gonghairun
		 * @description: 货主-下拉加载
		 * @param {*}
		 * @return {*}
		 */
		cargoOwnerLoadMore() {
			this.cargoOwnersPageNum++
			if (this.cargoOwnersTotalPageNum < this.cargoOwnersPageNum) {
				return
			}
			this.getCargoOwner(this.cargoOwnersQuery)
		},
		/**
		 * @Author: gonghairun
		 * @description: 货名-下拉加载
		 * @param {*}
		 * @return {*}
		 */
		cargoNameLoadMore() {
			this.cargoNamePageNum++
			if (this.cargoNameTotalPageNum < this.cargoNamePageNum) {
				return
			}
			this.getCargoName(this.cargoNameQuery)
		},
		/**
		 * @description:
		 * @param {*} 船名下拉加载更多
		 * @return {*}
		 * @author: zhangzhanhua
		 */
		shipLoadMore() {
			if (this.shipNameList.length == 0) {
				return
			}
			this.getShipName()
		},
		/**
		 * @Author: gonghairun
		 * @description: 获取船代数据
		 * @param {*} keyword
		 * @return {*}
		 */
		getShipAgent(keyword) {
			const _this = this
			this.$http
				.get(
					`/${this.$ServiceName}/api/external/protected/customer/listcompanybytype?customertype=03&id=${_this.shipAgentId}&keyword=${keyword}&startpage=${_this.shipAgentPageNum}&pagesize=20`
				)
				.then(res => {
					_this.shipAgentList = _this.shipAgentList.concat(res.data.data.pages)
					_this.shipAgentTotalPageNum = res.data.data.totalPageNum
				})
				.catch(error => {})
		},
		/**
		 * @Author: gonghairun
		 * @description: 船代-模糊查询
		 * @param {*}
		 * @return {*}
		 */
		remoteMethodShipAgent(query) {
			this.shipAgentList = []
			this.shipAgentQuery = query
			this.shipAgentPageNum = 1
			if (query !== "") {
				this.loading = false
				setTimeout(async () => {
					this.loading = false
					this.getShipAgent(query)
				}, 300)
			} else {
				this.getShipAgent("")
			}
		},
		/**
		 * @Author: gonghairun
		 * @description: 修改船代
		 * @param {*} value
		 * @return {*}
		 */
		shipAgentChange(value) {
			let shipAgentName = this.shipAgentList.filter(item => item.id === value)
			this.shipAgentOnChange(value == "" ? "" : value, value == "" ? "" : shipAgentName[0].fullName)
		},
		/**
		 * @Author: gonghairun
		 * @description: 获取船名数据
		 * @param {*} keyword
		 * @return {*}
		 */
		getShipName(keyword) {
			const _this = this
			this.$http
				.get(
					`/${this.$ServiceName}/api/external/protected/listshipall?flag=1&id=${_this.shipNameId}&keyword=${
						_this.shipKeyWord || keyword || ""
					}`,
					{ params: { ...this.queryAll } }
				)
				.then(res => {
					if (_this.queryAll.totalPageNum == res.data.data.totalPageNum) {
						return
					}
					this.queryAll.startpage += 1
					this.queryAll.totalPageNum = res.data.data.pageNum
					_this.shipNameList = _this.shipNameList.concat(res.data.data.pages)
				})
				.catch(error => {})
		},
		clearShip() {
			this.shipKeyWord = "" //保存搜索关键字
			this.queryAll.startpage = 1 //页数至1
			this.queryAll.totalPageNum = 0 //页码至0
			this.shipNameList = [] //列表值空
			let selectModel = document.querySelector(".selectClass").childNodes[0].childNodes[0]
			let selectScroll = document.querySelector(".selectClass").childNodes[0].childNodes[2].childNodes[0]
			selectModel.scrollTop = 0
			selectScroll.style.transform = "translateY(" + 0 + "%)"
			this.getShipName("")
		},
		/**
		 * @Author: gonghairun
		 * @description: 船名-模糊查询
		 * @param {*}
		 * @return {*}
		 */
		remoteMethodShipName(query) {
			this.shipKeyWord = query || "" //保存搜索关键字
			this.queryAll.startpage = 1 //页数至1
			this.queryAll.totalPageNum = 0 //页码至0
			this.shipNameList = [] //列表值空
			let selectModel = document.querySelector(".selectClass").childNodes[0].childNodes[0]
			let selectScroll = document.querySelector(".selectClass").childNodes[0].childNodes[2].childNodes[0]
			selectModel.scrollTop = 0
			selectScroll.style.transform = "translateY(" + 0 + "%)"
			if (query !== "") {
				this.loading = false
				setTimeout(async () => {
					this.loading = false
					this.getShipName(query)
				}, 300)
			} else {
				this.getShipName("")
			}
		},
		/**
		 * @Author: gonghairun
		 * @description: 修改船名
		 * @param {*} value
		 * @return {*}
		 */
		shipNameChange(value) {
			let shipName = this.shipNameList.filter(item => item.id === value)
			this.shipNameOnChange(value == "" ? "" : value, value == "" ? "" : shipName[0].shipNameVoyage)
		},
		/**
		 * @Author: gonghairun
		 * @description: 获取货代数据
		 * @param {*} keyword
		 * @return {*}
		 */
		getCargoAgent(keyword) {
			const _this = this
			_this.$http
				.get(
					`/${this.$ServiceName}/api/external/protected/customer/listcompanybytype?customertype=01&id=${_this.cargoAgentId}&keyword=${keyword}&startpage=${_this.cargoAgentPageNum}&pagesize=20`
				)
				.then(res => {
					_this.cargoAgentList = _this.cargoAgentList.concat(res.data.data.pages)
					_this.cargoAgentTotalPageNum = res.data.data.totalPageNum
				})
		},
		/**
		 * @Author: gonghairun
		 * @description: 货代-模糊查询
		 * @param {*}
		 * @return {*}
		 */
		remoteMethodCargoAgent(query) {
			this.cargoAgentList = []
			this.cargoAgentQuery = query
			this.cargoAgentPageNum = 1
			if (query !== "") {
				this.loading = false
				setTimeout(async () => {
					this.loading = false
					this.getCargoAgent(query)
				}, 300)
			} else {
				this.getCargoAgent("")
			}
		},
		/**
		 * @Author: gonghairun
		 * @description: 修改货代
		 * @param {*} value
		 * @return {*}
		 */
		cargoAgentChange(value) {
			let cargoAgentName = this.cargoAgentList.filter(item => item.id === value)
			this.cargoAgentOnChange(value == "" ? "" : value, value == "" ? "" : cargoAgentName[0].fullName)
		},
		/**
		 * @Author: gonghairun
		 * @description: 获取货主数据
		 * @param {*} keyword
		 * @return {*}
		 */
		getCargoOwner(keyword) {
			const _this = this
			_this.$http
				.get(
					`/${this.$ServiceName}/api/external/protected/customer/listcompanybytype?customertype=02&id=${_this.cargoOwnerId}&keyword=${keyword}&startpage=${_this.cargoOwnersPageNum}&pagesize=20`
				)
				.then(res => {
					_this.cargoOwnerList = _this.cargoOwnerList.concat(res.data.data.pages)
					_this.cargoOwnersTotalPageNum = res.data.data.totalPageNum
				})
		},
		/**
		 * @Author: gonghairun
		 * @description: 货主-模糊查询
		 * @param {*}
		 * @return {*}
		 */
		remoteMethodCargoOwner(query) {
			this.cargoOwnerList = []
			this.cargoOwnersQuery = query
			this.cargoOwnersPageNum = 1
			if (query !== "") {
				this.loading = false
				setTimeout(async () => {
					this.loading = false
					this.getCargoOwner(query)
				}, 300)
			} else {
				this.getCargoOwner("")
			}
		},
		/**
		 * @Author: gonghairun
		 * @description: 修改货主
		 * @param {*} value
		 * @return {*}
		 */
		cargoOwnerChange(value) {
			let cargoOwner = this.cargoOwnerList.filter(item => item.id === value)
			this.cargoOwnerOnChange(value == "" ? "" : value, value == "" ? "" : cargoOwner[0].fullName)
		},
		/**
		 * @Author: gonghairun
		 * @description: 获取货名数据
		 * @param {*} keyword
		 * @return {*}
		 */
		getCargoName(keyword) {
			const _this = this
			_this.$http
				.get(
					`/${this.$ServiceName}/api/external/protected/company/listcargoinfoname?code=${_this.cargoNameId}&keyword=${keyword}&startpage=${_this.cargoNamePageNum}&pagesize=20`
				)
				.then(res => {
					_this.cargoNameList = _this.cargoNameList.concat(res.data.data.pages)
					_this.cargoNameTotalPageNum = res.data.data.totalPageNum
				})
		},
		/**
		 * @Author: gonghairun
		 * @description: 货名-模糊查询
		 * @param {*}
		 * @return {*}
		 */
		remoteMethodCargoName(query) {
			this.cargoNameList = []
			this.cargoNameQuery = query
			this.cargoNamePageNum = 1
			if (query !== "") {
				this.loading = false
				setTimeout(async () => {
					this.loading = false
					this.getCargoName(query)
				}, 300)
			} else {
				this.getCargoName("")
			}
		},
		/**
		 * @Author: gonghairun
		 * @description: 修改货名
		 * @param {*} value
		 * @return {*}
		 */
		cargoNameChange(value) {
			let cargoName = this.cargoNameList.filter(item => item.cargoInfoCode === value)
			this.cargoNameOnChange(
				value == "" ? "" : value,
				value == "" ? "" : cargoName[0].cargoInfoName,
				value == "" ? "" : cargoName[0].ticketCode,
				value == "" ? "" : cargoName[0].ticketName
			)
		},
		/**
		 * @Author: gonghairun
		 * @description: 货名-模糊查询
		 * @param {*}
		 * @return {*}
		 */
		remoteMethodMainCargoName(query) {
			if (query !== "") {
				this.loading = false
				setTimeout(async () => {
					this.loading = false
					this.getCargoName(query)
				}, 300)
			} else {
				this.getCargoName("")
			}
		},
		/**
		 * @Author: gonghairun
		 * @description: 修改货名
		 * @param {*} value
		 * @return {*}
		 */
		cargoNameMainChange(value) {
			let cargoName = this.cargoNameList.filter(item => item.cargoInfoCode === value)
			this.cargoNameMainOnChange(value == "" ? "" : cargoName[0].ticketCode, value == "" ? "" : cargoName[0].ticketName)
		},
		/**
		 * @Author: gonghairun
		 * @description: 获取驳船数据
		 * @param {*} keyword
		 * @return {*}
		 */
		getBargeName(keyword) {
			const _this = this
			_this.$http.get(`/${this.$ServiceName}/api/external/public/listbarge?keyword=${keyword}`).then(res => {
				this.bargeNameList = res.data.data
			})
		},
		/**
		 * @Author: gonghairun
		 * @description: 驳船-模糊查询
		 * @param {*}
		 * @return {*}
		 */
		remoteMethodBargeName(query) {
			if (query !== "") {
				this.loading = false
				setTimeout(async () => {
					this.loading = false
					this.getBargeName(query)
				}, 300)
			} else {
				this.getBargeName("")
			}
		},
		/**
		 * @Author: gonghairun
		 * @description: 修改驳船
		 * @param {*} value
		 * @return {*}
		 */
		bargeNameChange(value) {
			let bargeName = this.bargeNameList.filter(item => item.id === value)
			this.bargeNameOnChange(value == "" ? "" : value, value == "" ? "" : bargeName[0].nameCn)
		},
		/**
		 * @Author: gonghairun
		 * @description: 获取船名航次数据
		 * @param {*}
		 * @return {*}
		 */
		getShipVoyage(keyword) {
			const _this = this
			_this.$http.get(`/${this.$ServiceName}/api/external/protected/listshipall?keyword=${keyword}`).then(res => {
				let data = res.data.data.pages
				if (data) {
					this.shipVoyageList = this.shipVoyageList.concat(data)
				} else {
					this.shipVoyageList = res.data.data
				}
			})
		},
		/**
		 * @Author: gonghairun
		 * @description: 船名航次-模糊查询
		 * @param {*}
		 * @return {*}
		 */
		remoteMethodShipVoyage(query) {
			this.shipVoyageList = []
			if (query !== "") {
				this.loading = false
				setTimeout(async () => {
					this.loading = false
					this.getShipVoyage(query)
				}, 300)
			} else {
				this.getShipVoyage("")
			}
		},
		/**
		 * @Author: gonghairun
		 * @description: 修改船名航次
		 * @param {*} value
		 * @return {*}
		 */
		shipVoyageChange(value) {
			let shipNameVoyage = this.shipVoyageList.filter(item => item.id === value)
			this.shipVoyageOnChange(value == "" ? "" : value, value == "" ? "" : shipNameVoyage[0].shipNameVoyage)
		},
	},
}
</script>

<style lang="less" scoped>
@import "./index.less";
</style>
